<template>
  <div>
    <div class="ContentBox">
      <div class="InputBoxs">
        <el-steps :active="active" finish-status="success" space="500px" align-center>
          <el-step title="基础信息" />
          <el-step title="分配库位" />
        </el-steps>
        <div v-if="flag" class="DivForm">
          <el-form ref="Form" :model="FormData" label-width="20px" class="Forms" :rules="rules">
            <!-- 1 -->
            <el-form-item prop="code">
              <template>
                <div class="text required">{{ ParentData.twoPo }}</div>
                <el-input v-model="FormData.code" :placeholder="core" style="width: 233px;" :disabled="true" />
              </template>
            </el-form-item>
            <!-- 2 -->
            <el-form-item prop="name">
              <template>
                <div class="text required">{{ ParentData.onePo }}</div>
                <el-input v-model="FormData.name" placeholder="请输入" style="width: 233px;" />
              </template>
            </el-form-item>
            <!-- 3 -->
            <el-form-item prop="personName">
              <template>
                <div class="text required">{{ ParentData.threePo }}</div>
                <el-input v-model="FormData.personName" placeholder="请输入" style="width: 233px;" />
              </template>
            </el-form-item>
            <!-- 4 -->
            <el-form-item prop="phone">
              <template>
                <div class="text required">{{ ParentData.fourPo }}</div>
                <el-input v-model="FormData.phone" placeholder="请输入" style="width: 233px;" />
              </template>
            </el-form-item>
            <!-- 5 -->
            <el-form-item prop="email">
              <template>
                <div class="text">{{ ParentData.fixPo }}</div>
                <el-input v-model="FormData.email" placeholder="请输入" style="width: 233px;" />
              </template>
            </el-form-item>
            <!-- 7 -->
            <el-form-item prop="useType">
              <template>
                <div class="text required">{{ ParentData.sixPo }}</div>
              </template>
              <el-cascader
                v-model="selectedOptions"
                size="large"
                :options="options"
                @change="handleChange"
              />
            </el-form-item>
            <!-- 8 -->
            <el-form-item prop="address">
              <template>
                <div class="text">{{ ParentData.sevenPo }}</div>
                <el-input v-model="FormData.address" placeholder="请输入" style="width: 487px;" />
              </template>
            </el-form-item>
            <!-- 6 -->
            <el-form-item prop="remark">
              <template>
                <div class="text">{{ '备注' }}</div>
                <el-input v-model="FormData.remark" placeholder="请输入" style="width: 487px;" />
              </template>
            </el-form-item>
          <!-- 按钮 -->
          </el-form>
        </div>
        <div v-else class="DivTab">
          <div>
            <el-button type="warning" class="FPbtn" @click="DistributionFn">分配库位</el-button>
            <el-button type="warning">取消分配</el-button>
          </div>
          <!-- <el-divider /> -->
          <div class="emptyTip">
            <el-empty image="http://www-wms-java.itheima.net/img/empty.4300e933.png"></el-empty>
          </div>
          <el-divider />
        </div>
        <div class="FormBtn">
          <el-button type="warning" style="background-color: #f8f5f5;" @click.native="Back">返回</el-button>
          <el-button type="warning" @click="Submit">下一步</el-button>
        </div>
      </div>
    </div>
    <el-dialog :visible="DistributionDia" title="分配货主库位" width="40%" @close="CloseFn">
      <el-divider />
      <el-cascader
        :options="DistributionData"
        :props="{ multiple: true, checkStrictly: false }"
        clearable
        v-model="ShipperBatch"
        @change="Batch"
      />
      <div style="margin-left:280px;">
        <el-button type="warning" @click.native="Back" class="BtnO">取消</el-button>
        <el-button type="warning" @click="Batch" class="BtnT">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { NewCode, GetAllWarehouseList, QueryWarehouseArea, ModifyWarehouseArea, AddShipper, ReservoirThree, OwnerLocation, ShipperBatch } from '@/api'
import RouteData from '@/utils/RouteData'
import { regionData, CodeToText } from 'element-china-area-data'
export default {
  data() {
    return {
      // 货主批量数据
      ShipperBatch: [],
      ShipperId: '',
      DistributionData: [],
      // 分配弹窗
      DistributionDia: false,
      // 切换form和表格页面
      flag: false,
      // 地址插件
      options: regionData,
      selectedOptions: [],
      // 步骤index
      active: 0,
      // 编码
      core: '',
      ParentData: {},
      FormData: {},
      list: {},
      rules: {
        name: [
          { required: true, message: '请输入货主名称', trigger: 'blur' }
        ],
        personName: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入正确手机号', trigger: 'blur' },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确手机号', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入正确手机号', trigger: 'blur' },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确手机号', trigger: 'blur' }
        ]
      },
      AllData: {}
    }
  },
  watch: {
    list: {
      immediate: true,
      deep: true,
      async handler() {
        const res = await GetAllWarehouseList({ status: 1 })
        res.data.data.forEach((item) => {
          this.list[item.name] = item.id
        })
      }
    }
  },
  async created() {
    this.$route.meta.title = '编辑库区'
    // 拿去路由数据渲染字段
    this.ParentData = RouteData(this.$route)
    // 编码
    this.NewCodeFn()
    if (this.$route.query.Id) {
      this.QueryWarehouseAreaFn()
    }
    console.log(this.list)
  },
  methods: {
    // 提交
    async Submit() {
      this.$refs.Form.validate(async(vala) => {
        if (vala) {
          try {
            let msg = ''
            if (this.$route.query.Id) {
              console.log(1)
              msg = await ModifyWarehouseArea(this.FormData)
            } else {
              console.log(2)
              msg = await AddShipper(this.FormData)
              this.ShipperId = msg.data.data.id
              this.flag = false
              this.active = 1
              // 全量数据
              this.GetAllWarehouse()
            }
            if (msg.data.isSuccess) {
              this.$message({
                message: msg.data.msg,
                type: 'success'
              })
              return
            }
            if (msg.data.isError) {
              this.$message({
                message: msg.data.msg,
                type: 'warning'
              })
              return
            }
          } catch (err) {
            console.log(err)
          }
        }
      })
    },
    // 地址数据
    handleChange() {
      var loc = ''
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]] + '/'
      }
      this.FormData.province = this.selectedOptions[0]
      this.FormData.city = this.selectedOptions[1]
      this.FormData.area = this.selectedOptions[2]
      this.FormData.location = loc.split('/').splice(0, 3).join('/')
    },
    // 获取新编号
    async NewCodeFn() {
      const res = await NewCode('HZ')
      this.core = res.data.data
      this.FormData.code = this.core
    },
    // 拿取全量数据
    async GetAllWarehouse() {
      GetAllWarehouseList({ status: 1 }).then((res) => {
        this.AllData = res.data.data
        console.log(this.AllData)
        res.data.data.forEach((item) => {
          this.list[item.name] = item.id
        })
        this.DistributionTree()
      })
    },
    // 分配库位数据处理
    async DistributionTree() {
      for (const k in this.AllData) {
        const res = await ReservoirThree({ '仓库id': this.AllData[k].id })
        // 判断接口数据的children字段里的ownerId字段，是否有id，有id
        res.data.data.forEach((item) => {
          if (!item.children.length) {
            item.children = ''
            return
          }
          // Object.keys(item)
          // for (let i = 0; i < item.children.length; i++) {
          //   console.log(item.children[i])
          //   if (item.children[i].ownerId) {
          //     item.children[i].disabled = true
          //   }
          // }
          item.children.forEach((chir) => {
            if (chir.ownerId) {
              chir.disabled = true
            }
            // console.log(chir)
          })
          // console.log(item)
        })
        this.DistributionData.push({ value: this.AllData[k].id, label: this.AllData[k].name, children: res.data.data })
        console.log(this.DistributionData)
      }
    },
    // 分配弹窗确定
    async Batch(a, b) {
      const res = this.ShipperBatch.map((item) => {
        return item.join(',')
      })
      await ShipperBatch({ ownerId: 1039470987957008193, idStrArray: res })
      this.CloseFn()
      this.DistributionData = []
    },
    // 数据回显
    async QueryWarehouseAreaFn() {
      const res = await QueryWarehouseArea(this.$route.query.Id)
      this.FormData = res.data.data
    },
    // 分配库位
    DistributionFn() {
      this.GetAllWarehouse()
      this.DistributionDia = true
    },
    CloseFn() {
      this.DistributionDia = false
      this.DistributionData = []
    },
    // 返回
    Back() {
      this.$router.go(-1)
      this.$store.dispatch('tagsView/delView', this.$route)
    }
  }
}
</script>
<style lang="scss" scoped>
.DivTab{
  padding:0px 40px;
  .FPbtn{
    background-color: #00be76;
    color: #fff;
    &:hover{
    background-color: #007a4c;
    }
  }
}
::v-deep .emptyTip .imgIcon {
    width: 160px;
    height: 160px;
    display: inline-block;
    background-size: contain;
    z-index: 9999;
}
.emptyTip{
  border-top: 1px solid #f5efee;
      padding: 100px;
      margin: 20px auto;
      color: #b5abab;
      font-size: 14px;
      text-align: center;
}
.FormBtn{
  .el-button{
    margin:20px 20px;
  }
}
.el-divider{
  margin-top:-20px;
}
.BtnO{
  background-color: #f8f5f5;
  &:hover{
    background-color: #ffb200;

  }
}
.BtnT{
  background-color: #ffb200;
  &:hover{
    background-color: #ff8e00;
  }
}
</style>
